<template>
  <el-dialog
    title="导入标签"
    :modal="false"
    :visible.sync="centerDialogVisible"
    width="50%"
    center
  >
    <div>
      <el-card>
        <el-form
          ref="orderForm"
          :model="queryParams"
          size="mini"
          label-width="60px"
        >
          <el-col :span="9">
            <el-form-item label="物流公司" prop="trackType">
              <el-select
                v-model="queryParams.trackType"
                placeholder="请选择物流公司"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, label) in typeOptions"
                  :key="label"
                  :label="label"
                  :value="item"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
      <el-card>
        <el-upload
          class="upload-demo"
          drag
          action="fakeaction"
          :http-request="uploadFn"
          :show-file-list="true"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>
      </el-card>
      <el-card>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="fakeaction"
          :show-file-list="true"
          :http-request="uploadFn"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :auto-upload="true"
        >
          <el-button
            slot="trigger"
            size="small"
            type="primary"
            v-loading.fullscreen.lock="fullscreenLoading"
            >选取文件并上传</el-button
          >
          <!-- <el-button style="margin-left: -800px;" size="small" type="success" @click="uploadFn" >上传到服务器</el-button> -->
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import { untransform } from "@/store/yg/common/uri";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";
export default {
  props: ["row", "data", "more"],
  data() {
    return {
      fullscreenLoading: false,
      centerDialogVisible: false,
      queryParams: {
        trackType: ""
      },
      rules: {
        trackType: [
          {
            required: true,
            message: "请选择物流公司",
            trigger: "change"
          }
        ]
      },
      typeOptions: {
        DPD: "DPD",
        FEDEX: "FEDEX",
        DHL: "DHL",
        UPS: "UPS"
      },
      action: "",
      feeData: [],
      fileList: [
        { name: "food.jpeg", url: "" },
        { name: "food2.jpeg", url: "" }
      ]
    };
  },
  created: function() {
    this.action =
      constant.API_SERVER +
      "/api/consume/upload?uri=" +
      untransform(this.$route.params.uri) +
      "&f=toBatchImportTrackLabel&type=main&id=" +
      this.data["id"];
  },
  methods: {
    //初始化数据
    uploadFn(params) {
      //自定义上传文件
      const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf("pdf") !== -1,
        isLt4M = file.size / 1024 / 1024 < 4;
      // 这里常规检验，看项目需求而定
      // if (!isImage) {
      //  this.$message.error("只能上传pdf格式!");
      //  return;
      // }

      //if (!isLt4M) {
      //   this.$message.error("只能上传图片大小小于4M");
      //   return;
      //  }
      // 根据后台需求数据格式
      if (file == null || file == "") {
        this.$message.error("请选择要上传的文件");
        return;
      }
      if (
        this.queryParams.trackType == null ||
        this.queryParams.trackType == ""
      ) {
        this.$message.error("请选择物流公司");
        return;
      }
      console.info("trackType:", this.queryParams.trackType);
      const form = new FormData();
      // 文件对象
      form.append("items[]", file);
      form.append("trackType", this.queryParams.trackType);
      this.fullscreenLoading = true;
      axios({
        method: "post",
        url: this.action+"&class=com.tofba.app.client.seaair.SeaAirExpressListClient",
        data: form
      }).then(
        res => {
          this.fullscreenLoading = false;
          console.log(res);
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
          } else {
            this.$message({
              message: "上传成功",
              type: "success"
            });
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  },
  mounted() {}
};
</script>

<style></style>
